﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
        * {
            padding: 0px;
            margin: 0px;
        }

        #container {
            height: 170px;
            width: 490px;
            margin: 20px auto;
            overflow: hidden;
            position: relative;
            background-color: #eee;
        }

        #pic {
            position: absolute;
            width: 2450px;
        }

            #pic li {
                display: block;
                height: 170px;
                float: left;
            }

        .mar_top {
            margin-right: -170px;
        }

        #menu {
            border-radius: 10px;
            position: absolute;
            text-align: center;
            font-size: 0px;
            background: rgba(255, 255, 255, 0.5) none repeat scroll 0% 0%;
            left: 50%;
            top: 90%;
            margin-left: -45px;
        }

            #menu li {
                display: inline-block;
                margin: 2px;
                background-color: #B7B7B7;
                border-radius: 50%;
            }

                #menu li a {
                    display: block;
                    padding-top: 9px;
                    width: 9px;
                    height: 0px;
                    border-radius: 50%;
                }

        .select {
            background-color: #F40;
        }

        .progress {
            position: absolute;
            background-color: #e23703;
            top: 97%;
            height: 5px;
        }

    </style>
</head>
<body>
    <div id="container">
        <ul id="pic">
            <li><img src="img/01.jpg"></li>
            <li><img src="img/02.jpg"></li>
            <li><img src="img/03.jpg"></li>
            <li><img src="img/04.jpg"></li>
            <li><img src="img/05.jpg"></li>
        </ul>
        <ul id="menu">
            <li><a class="select"></a></li>
            <li><a></a></li>
            <li><a></a></li>
            <li><a></a></li>
            <li><a></a></li>
        </ul>
        <div class="progress" id="progress"></div>
    </div>
    <script type="text/javascript">
        window.onload = function () {
            var select = 0;
            var timer = null;
            var autotimer = null;
            var pic = document.getElementById('pic');
            var menu = document.getElementById('menu');
            var img = pic.getElementsByTagName('li');
            var menu_li = menu.getElementsByTagName('a');
            var progress = document.getElementById('progress');

            for (var i = 0 ; i < img.length ; i++) {
                img[i].index = i;
                menu_li[i].index = i;
                menu_li[i].onmouseover = function () {
                    clearInterval(autotimer);
                    play(this.index);
                };
                menu_li[i].onmouseout = function () {
                    auto(this.index);
                }
            }
            auto(1);
            function auto(start) {
                clearInterval(autotimer);
                var i = start;
                var speed = 0;
                var needChange = false;
                autotimer = setInterval(function () {
                    needChange = false;

                    if (progress.offsetWidth <= 60) {
                        speed += 0.12;
                    } else if (progress.offsetWidth >= 60 && progress.offsetWidth <= 430) {
                        speed += 0.23;
                    } else {
                        speed += 0.13;
                        needChange = progress.offsetWidth >= 490;
                    }

                    if (needChange) {
                        speed = 0;
                        play(i);
                        i++;
                        if (i == img.length) {
                            i = 0;
                        }
                    } else {
                        progress.style.width = speed + '%';
                    }
                }, 15);
            }

            function play(i) {
                clearInterval(timer);
                progress.style.width = 0 + 'px';
                var target = -i * 490;
                menu_li[select].className = '';
                select = i;
                menu_li[select].className = 'select';
                timer = setInterval(function () {
                    var speed = (target - pic.offsetLeft) / 10;
                    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                    if (pic.offsetLeft == target) {
                        clearInterval(timer);
                    }
                    pic.style.left = pic.offsetLeft + speed + 'px';
                }, 20);
            }
        };

    </script>
</body>
</html>